<template>
  <div class="steps">
    <div
      v-for="(item, index) in stepArray"
      :key="index"
      :style="{
        width: 100 / stepArray.length + '%',
        boxShadow:
          activeId === index
            ? ' 0 0 20px inset #04c0b3'
            : ' 0 0 20px inset rgba(0,0,0,0)',
      }"
    >
      <div class="zhimage-line">
        <img
          :src="item.imgurl ? item.imgurl : ''"
          :height="setimageheight(index)"
          :max-width="setimagewidth(index)"
          class="zhimage"
        />
      </div>
      <div class="width-100 mt-b">
        <p
          class="title"
          :style="{ color: activeId === index ? '#a8f9da' : '' }"
          @cilck="selectGrowth(item)"
        >
          {{ item.name }}
        </p>
      </div>
      <div
        v-if="errorStep <= 0"
        class="width-100"
      >
        <div
          class
          :class="[
            index < currentVal
              ? 'color-pick circle'
              : 'color-no-pick circle-no-border',
            '',
          ]"
        ></div>
        <p
          v-show="index != 0"
          class="line-1"
          :class="[index < currentVal ? 'color-pick' : 'color-no-pick', '']"
        ></p>
        <p
          v-show="index != stepArray.length - 1"
          class="line-2"
          :class="[index < currentVal - 1 ? 'color-pick' : 'color-no-pick', '']"
        ></p>
      </div>
      <div
        v-else
        class="width-100"
      >
        <div
          class
          :class="[
            index < errorStep
              ? 'color-pick circle'
              : index == errorStep
                ? 'color-pick circle-error'
                : 'color-no-pick circle-no-border',
            '',
          ]"
        ></div>
        <p
          v-show="index != 0"
          class="line-1"
          :class="[
            index < errorStep
              ? 'color-pick'
              : index == errorStep
                ? 'color-error-pick-1'
                : 'color-no-pick',
            '',
          ]"
        ></p>
        <p
          v-show="index != stepArray.length - 1"
          class="line-2"
          :class="[
            index < errorStep - 1
              ? 'color-pick'
              : index == errorStep - 1
                ? 'color-error-pick-2'
                : 'color-no-pick',
            '',
          ]"
        ></p>
      </div>
      <div class="width-100 mt-b">
        <p
          class="zh-bot-desc"
          :style="setbottomback(index)"
          @click="selectGrowth(item, index)"
        >
          {{ item.desc }}
        </p>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.steps {
  /* background: rgb(185, 152, 5); */
  display: flex;
  /*justify-content: space-evenly;*/
  align-items: flex-end;
  width: 100%;
  /* overflow: scroll; */
  // overflow: hidden;
  text-align: center;
  padding: 16px 0;
}
.line-1 {
  width: 50%;
  height: 2px;
  position: absolute;
  z-index: 0;
  left: 0;
  top: -11px;
}
.line-2 {
  width: 50%;
  height: 2px;
  position: absolute;
  z-index: 0;
  top: -11px;
  left: 50%;
}
.mt-b {
  margin-bottom: 4px;
}
.color-pick {
  background: #a8f9da;
  // font-weight: 600;
  /* border-color: rgba(0,122,255,.3); */
}
.color-no-pick {
  background: #dddee3;
}
.color-error-pick-1 {
  background-image: linear-gradient(90deg, #b377f6 0%, #df3031 100%);
}
.color-error-pick-2 {
  background-image: linear-gradient(
    90deg,
    #007aff 0%,
    #8091ff 60%,
    #b377f6 100%
  );
}
.width-100 {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
.title {
  width: 100px;
  /*font-weight: bold;*/
  line-height: 18px;
  font-size: 12px;
  color: #fff;
}
.zh-bot-desc {
  width: 80px;
  /*font-weight: bold;*/
  line-height: 20px;
  font-size: 12px;
  /* color: #fff; */
  background-color: #ccd7da;
  color: #174b58;
  border-radius: 50px;
  cursor: pointer;
}
.zhimage-line {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column-reverse;
  // justify-content: center;
  align-items: center;
  .zhimage {
    max-width: 100%;
    height: auto;
  }
}

.circle {
  width: 8px;
  height: 8px;
  /*border: 2px solid #fff;*/
  border-radius: 50%;
  /*background: #007AFF;*/
  z-index: 9;
}
.circle-error {
  width: 8px;
  height: 8px;
  /*border: 2px solid #fff;*/
  border-radius: 50%;
  background: #df3031;
  z-index: 9;
}
.circle-no-border {
  width: 8px;
  height: 8px;
  /*border: 2px solid #fff;*/
  border-radius: 50%;
  /*background: #007AFF;*/
  z-index: 9;
}
.circle-no-border::before {
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  background: #dddee3;
  position: absolute;
  top: -2px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid #fff;
}
.circle::after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  background: rgba(0, 122, 255, 0.15);
  position: absolute;
  top: -2px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.circle-error::after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  background: rgba(223, 48, 49, 0.15);
  position: absolute;
  top: -2px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
</style>
<script>
export default {
  props: {
    currentVal: {
      type: Number,
      default: 7
    },
    errorStep: {
      type: Number,
      default: 0
    },
    stepArray: {
      type: Array,
      default: function() {
        return [];
      }
    },
    nowPhaseId: {
      type: [String, Number],
      default: () => {
        return "";
      }
    }
  },
  data() {
    return {
      activeId: ""
    };
  },
  watch: {
    stepArray(v) {
      if (v.length > 0) {
        if (this.activeId !== 0) {
          if (this.nowPhaseId) {
            var index = v.findIndex(a => a.growthPhaseNo === this.nowPhaseId);
            if (index !== -1) {
              this.selectGrowth(v[index], index);
            }
          } else {
            this.selectGrowth(v[0], 0);
          }
        }
      }
    }
  },
  methods: {
    // 选择伸张
    selectGrowth(item, index) {
      this.activeId = index;
      this.$emit("growthAcitive", item);
    },
    // 设置图片高度
    setimageheight(i) {
      let nowheight = 50 + 25 * i;
      return nowheight + "px";
    },
    // 设置图片宽度
    setimagewidth(i) {
      // let nowidth = 60 + 15 * i;
      // return nowidth + "px";
      let nowidth = 100;
      return nowidth + "%";
    },
    // 设置最底部条状信息
    setbottomback(i) {
      // if (this.currentVal === i + 1) {
      //   return { backgroundColor: "#a8f9da", "font-weight": 600 };
      // }
      if (this.activeId === i) {
        return { backgroundColor: "#a8f9da", "font-weight": 600 };
      }
    }
  }
};
</script>
